<template>
  <view class="template-blogger tn-safe-area-inset-bottom">
    <view :style="{height: vuex_custom_bar_height + 'px'}" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back'
              @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
          <text class="tn-text-bold tn-text-xl tn-color-black">交易单量</text>
        </view>
      </tn-nav-bar>
    </view>
    <view class="tn-flex tn-padding-sm" style="justify-content: space-between; position: fixed; width: 100%">
      <view class="tn-color-grey tn-margin-left-sm">
        <text>已解冻: {{allNum}}</text>
      </view>
      <view>
        <view class="justify-content-item tn-margin-right-sm tn-padding-xs tn-text-sm tn-bg-gray--light tn-radius tn-color-gray--dark" @click="timeShow = true">
          <text class="tn-padding-left-xs tn-padding-right-xs">{{currentTime}}</text>
          <text class="tn-icon-down tn-padding-right-xs"></text>
        </view>
      </view>
    </view>
    <view style="height: 40rpx"></view>
    <!-- 内容 -->
    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
      <tn-select v-model="timeShow" mode="single" :searchShow="false" :list="timeList" @confirm="handTimeConfirm" :zIndex="99999999999"></tn-select>
      <!-- 图文信息 -->
      <view v-for="(item,index) in content" :key="index" class="content_item" @click="tn('/homepages/detail?id='+item.paperId)">
        <view class="blogger__item">
          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
            <view class="justify__author__info">
              <view class="tn-flex tn-flex-row-center">
                <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                  <view class="tn-padding-right tn-text-ellipsis">
                    <view class="tn-padding-right tn-text-bold tn-text">订单编号：{{ item.orderId }}
                      <text class="tn-icon-copy tn-margin-left-sm tn-color-blue" @click.stop="copyOrderId(item.orderId)"></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
              <tn-tag :backgroundColor="`tn-main-gradient-${getStatusText(item.orderPayStatus).bgColor}--light`"
                      :fontColor="`tn-color-${getStatusText(item.orderPayStatus).color}`" shape="circle"
                      height="48rpx" width="100">
                {{getStatusText(item.orderPayStatus).text}}
              </tn-tag>
            </view>
          </view>

          <view class="tn-flex">
            <view style="flex: 1">
              <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
                <!-- 不用限制长度了，因为发布的时候限制长度了-->
                <text class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-lg">{{ item.title }}</text>
              </view>

              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
                <view class="justify-content-item tn-color-gray tn-text-center">
                  <view class="">
                    {{item.createTime}}
                  </view>
                </view>
              </view>
            </view>
            <view class="tn-text-right" style="flex: 1">
              <view class="tn-color-orange tn-text-bold tn-main-top-sm" style="margin-top: 30rpx">
                已解冻：+{{item.notWithdrawAmount}}
              </view>
              <view class="tn-color-grey tn-text-bold" style="margin-top: 20rpx">
                未解冻：+{{item.frozenAmount}}
              </view>
            </view>
          </view>

        </view>
      </view>
      <view v-if="content.length === 0">
        <tn-empty mode="list"></tn-empty>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import TnTag from "../tuniao-ui/components/tn-tag/tn-tag.vue";
import TnAvatarGroup from "../tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue";
import TnSelect from "../tuniao-ui/components/tn-select/tn-select.vue";
import {getTransactionListApi} from "../api/report";
export default {
  name: 'TemplateBlogger',
  components: {TnSelect, TnAvatarGroup, TnTag},
  mixins: [template_page_mixin],
  data() {
    return {
      timeShow: false,
      currentTime: "近一年",
      timeList: [
        {
          value: 'year',
          label: '近一年'
        },
        {
          value: 'month',
          label: '近一月',
        },
        {
          value: 'week',
          label: '近一周'
        }
      ],
      // 内容默认隐藏显示的高度
      contentHideShowHeight: 0,
      tipsDataMessage: {
        latestMessageUserAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
        messageCount: 3,
        likeCount: 1290,
        hotReviewsCount: 896,
        fansCount: 962,
        focusCount: 86
      },
      content: [],
      adAutoplay: false,
      allNum: 0
    }
  },
  computed: {

  },
  onLoad() {
    this.queryOrderDetail();
    this.contentHideShowHeight = uni.upx2px(56) * 3
  },
  onReady() {
  },
  onShow() {
    this.adAutoplay = true
  },
  onHide() {
    this.adAutoplay = false
  },
  methods: {
    async queryOrderDetail() {
      try {
        const find = this.timeList.find(item => item.label === this.currentTime);
        const res = await getTransactionListApi(find.value);
        if (res.code === 200) {
          this.content = res.data?.transactionListDTOS || [];
          this.allNum = res.data?.selectSumFrozenAmount || 0;
        }
      } catch (e) {
        console.log(e)
      }
    },
    handTimeConfirm(e) {
      this.currentTime = e[0].label;
      this.queryOrderDetail();
    },
    copyOrderId(orderId) {
      wx.vibrateShort();
      uni.setClipboardData({
        data: orderId,
      })
    },

    getStatusText(status) {
      const statusList = global.staticDict.orderStatus;
      return statusList[status] || "";
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
    // 震动跳转
    navEdit(e) {
      wx.vibrateLong();
      uni.navigateTo({
        url: '/circlePages/edit'
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.template-blogger{
  .content_item {
    margin: 30rpx;
    box-shadow: 0 4px 21px 0 rgba(0, 3, 72, .1);
    border-radius: 20rpx;
  }
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

$cube-size: 120rpx;
$cube-split: 60rpx;

/* 立体头像 start*/

.cube {
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  height: 550rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  font-weight: 300;

  &__container {
    margin-top: 180rpx;
    position: relative;
    width: $cube-size;
    height: $cube-size;
    -webkit-perspective: 500px;
    perspective: 500px;//透视太大会超过屏幕就不好了吖

    &:before {
      content: '';
      width: $cube-size;
      height: $cube-size;
      position: absolute;
      // top: calc(50% - ($cube-split - 30px));
      // left: calc(50% - $cube-split);
      background-color: #3c6496;
      filter: blur(60px);
      opacity: .8;
    }

    &__body {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: translateZ(-75px);
      animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
      will-change: transform;

      &__item {
        position: absolute;
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $cube-size;
        height: $cube-size;
        font-size: 30px;
        background-repeat: no-repeat;
        background-size: cover;

        &--front {
          transform: rotateY(0deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
        &--back {
          transform: rotateX(180deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
        &--right {
          transform: rotateY(90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
        &--left {
          transform: rotateY(-90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
        &--top {
          transform: rotateX(90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
        &--bottom {
          transform: rotateX(-90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
      }
    }
  }
}

@keyframes cubeFrame {
  10% {
    transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
  }
  15% {
    transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
  }
  20% {
    transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
  }
  30% {
    transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
  }
  40% {
    transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
  }
  45% {
    transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
  }
  55% {
    transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
  }
  60% {
    transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
  }
  70% {
    transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
  }
  80% {
    transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
  }
  90% {
    transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
  }
  100% {
    transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
  }
}
/* 立体头像 end*/

/* 信息提示 start */
.blogger-tips-data {
  background-color: #F8F7F3;

  &__wrap {
    border-radius: 60rpx 60rpx 0 0;
  }

  &__message {
    padding-top: 60rpx;

    &__container {
      padding: 5rpx;
      border-radius: 100rpx;
    }

    &__avatar {
      margin: 6rpx 0 0 6rpx;
    }
  }

  &__info {
    padding: 40rpx 0 0 0;
  }
}
/* 信息提示 end */

/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__desc {
    line-height: 55rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00FFC8;
        padding-right: 10rpx;
      }
    }
    &__content {

    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;
    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82B2FF;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      max-width: 80%;
      max-height: 300rpx;
    }

    &--2 {
      max-width: 260rpx;
      max-height: 260rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }
    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }
      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }
      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}
/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

}
/* 底部悬浮按钮 end*/

/* 广告内容 start */
.ad-image{
  width: 80rpx;
  height: 80rpx;
  position: relative;
}
.ad-pic{
  background-size: cover;
  background-repeat:no-repeat;
  // background-attachment:fixed;
  background-position:top;
  border-radius: 20%;
}
/* 自定义导航栏内容 end */

/* 悬浮 */
.tnxuanfu{
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.8rem);
  }
}
/* 悬浮按钮 */
.button-shop {
  width: 90rpx;
  height: 90rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  /* bottom:200rpx;
    right: 20rpx; */
  left: 5rpx;
  top: 5rpx;
  z-index: 1001;
  border-radius: 100px;
  opacity: 0.9;
}


/* 按钮 */
.edit {
  bottom: 300rpx;
  right: 75rpx;
  position: fixed;
  z-index: 9999;
}


.pa,
.pa0 {
  position: absolute
}

.pa0 {
  left: 0;
  top: 0
}


.bg0 {
  width: 100rpx;
  height: 100rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg1 {
  width: 100%;
  height: 100%;
}




.hx-box {
  top: 50%;
  left: 50%;
  width: 100rpx;
  height: 100rpx;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
}

.hx-box .pr {
  width: 100rpx;
  height: 100rpx;
  transform-style: preserve-3d;
  animation: hxz 20s linear infinite;
}

@keyframes hxz {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-360deg);
  }
}



.hx-box .pr .pa0 {
  width: 100rpx;
  height: 100rpx;
  /* border: 4px solid #5ec0ff; */
  border-radius: 1000px;
}

.hx-box .pr .pa0 .span {
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
  background-size: 100% 100%;
  animation: hx 4s linear infinite;
}

@keyframes hx {
  to {
    transform: rotate(360deg);
  }
}

.hx-k1 {
  transform: rotateX(-60deg) rotateZ(-60deg)
}

.hx-k2 {
  transform: rotateX(-30deg) rotateZ(-30deg)
}

.hx-k3 {
  transform: rotateX(0deg) rotateZ(0deg)
}

.hx-k4 {
  transform: rotateX(30deg) rotateZ(30deg)
}

.hx-k5 {
  transform: rotateX(60deg) rotateZ(60deg)
}

.hx-k6 {
  transform: rotateX(90deg) rotateZ(90deg)
}

</style>
